<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/cascader.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {},
            schema: {
                properties: {
                    name1: {
                        label: '属性',
                        widget: 'cascader',
                        enum: [
                            {
                                value: 'a',
                                label: 'A',
                                children: [
                                    { value: 'a-1', label: 'A-1' },
                                    { value: 'a-2', label: 'A-2' }
                                ]
                            }, {
                                value: 'b',
                                label: 'B',
                                children: [
                                    { value: 'b-1', label: 'B-1' },
                                    { value: 'b-2', label: 'B-2' }
                                ]
                            }
                        ],
                        ui: {
                            placeholder: '请选择',
                            clearable: true,
                            props: {
                                multiple: true
                            }
                        }
                    },
                    name2: {
                        label: '插槽',
                        widget: 'cascader',
                        enum: [
                            {
                                value: 'a',
                                label: 'A',
                                children: [
                                    { value: 'a-1', label: 'A-1' },
                                    { value: 'a-2', label: 'A-2' }
                                ]
                            }, {
                                value: 'b',
                                label: 'B',
                                children: [
                                    { value: 'b-1', label: 'B-1' },
                                    { value: 'b-2', label: 'B-2' }
                                ]
                            }
                        ],
                        ui: {
                            placeholder: '请选择',
                            filterable: true
                        },
                        slots: {
                            default(h, { data }) {
                                return [
                                    <span>{ data.label }</span>,
                                    <span>({ data.children && data.children.length })</span>
                                ]
                            },
                            empty(h) {
                                return '米有呀o(╥﹏╥)o'
                            }
                        }
                    },
                    name3: {
                        label: '异步选项',
                        widget: 'cascader',
                        enum: [],
                        asyncData: (cb) => {
                            /** --- use cb([]) --- */
                            // http request
                            // axios.get('xxxx', {})
                            //     .then(res => {
                            //         const list = (res || []).map(e => ({label: e.label, value: e.value}))
                            //         cb(list)
                            //     })
                            //     .catch(() => cb([]))

                            /** --- use Promise --- */
                            return new Promise((resolve) => {
                                // http request
                                // axios.get('xxxx', {})
                                //     .then(res => {
                                //         const list = (res || []).map(e => ({label: e.label, value: e.value}))
                                //         resolve(list)
                                //     })
                                //     .catch(() => resolve([]))
                                let id = 0;
                                const list = Array.from({ length: 3 })
                                    .map(() => ({
                                        value: ++id,
                                        label: `选项${id}`,
                                        children: Array.from({ length: 3 }).map(() => ({ value: ++id, label: `选项${id}` }))
                                    }));
                                setTimeout(() => {
                                    resolve(list)
                                }, 2000)
                            })
                        },
                        ui: {
                            placeholder: '请选择',
                            filterable: true
                        },
                        custom: {
                            visibleAsync: true
                        }
                    },
                    name4: {
                        label: '官方异步',
                        widget: 'cascader',
                        ui: {
                            props: {
                                lazy: true,
                                lazyLoad (node, resolve) {
                                    const { level } = node;
                                    let id = 0;
                                    setTimeout(() => {
                                        const nodes = Array.from({ length: level + 1 })
                                            .map(() => ({
                                                value: ++id,
                                                label: `选项${id}`,
                                                leaf: level >= 2
                                            }));
                                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                                        resolve(nodes);
                                    }, 1000);
                                }
                            }
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                col: {
                    span: 12
                }
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
